<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta name="description" content="bootstrap admin template">
        <meta name="author" content="">
        <script type="text/javascript" src="../_resource/js/header.js"></script>
        <script>
            var RUN_FUNCS = [];
            var SITE_URL = "http://admin.html.me";
            var CURR_CONTROLLER = "FaqCategory";
            var CURR_ACTION = "index";
            Breakpoints();
        </script>
        <style type="text/css">
            .list-table table td, .list-table table th{background:#fff; text-align:center;}
            .__access{display: none;}
        </style>
    </head>
    <body class="dashboard">
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
             <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
        </nav>
        <div class="site-menubar">
            <div class="site-menubar-body" id="site-menubar-body">
                <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
            </div>
        </div>

        <!-- Page -->
        <div class="page">
            <div class="page-content container-fluid">

                <div
                    class="list-table " 

                    style="" 
                    >
                    <div class="panel panel-bordered list-table-search" style="">
                        <div class="panel-body">
                            <form class="form-inline search-form " id="searchForm" name="searchForm" target="_self" onsubmit="loadFAQCategoryData();
                                    return false;">
                                <div class="search-row " style="">
                                    <div id="keywords-form-item"  class="form-group " style="" >
                                        <label for="keywords" class="control-label ">Keyword:</label>
                                        <input type="text" name="keywords" id="keywords" class="form-control " style="" placeholder=""  value="" />
                                    </div>
                                    <button class="btn btn-success" type="button" onclick="loadFAQCategoryData();" style="">Search</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="panel " style="">
                        <div class="panel-body">
                            <div class="list-btns margin-bottom-15 " style="height: 36px;">
                                <a class="btn btn-primary __access" id="_access-faq-category-add" href="/FaqCategory/add.html" target="_self" style="">ADD</a>
                                <a class="btn btn-danger __access" id="_access-faq-category-delete" href="javascript:;"  target="_self" style="">Delete</a>
                                <a class="btn btn-info btn-activate __access" id="_access-faq-category-open" href="javascript:;" target="_self" style="">Activate</a>
                                <a class="btn btn-warning btn-deactivate __access" id="_access-faq-category-close" href="javascript:;" target="_self" style="">Deactivate</a>
                            </div>
                            <table id="tabel201709201430488112715" border="0" cellpadding="6" cellspacing="1" class="table table-bordered checkListTable" style="">
                                <thead class="list-thead">
                                    <tr>
                                        <td class="nosort" width="38" data-width="38" style="text-align:center; line-height: normal;">
                                            <span class="checkbox-custom checkbox-primary">
                                                <input class="selectable-all" type="checkbox" onclick="$.tableCheckHandler(this)">
                                                <label></label>
                                            </span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="100" code="id">
                                            <span>ID</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" code="category_name">
                                            <span>Name</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="150" code="created_at">
                                            <span>Creation Date</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="150" code="updated_at">
                                            <span>Edit Date</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="100" code="category_status">
                                            <span>Status</span>
                                        </td>
                                        <td class="nosort" style="text-align:center;white-space:nowrap;" width="200" code="">
                                            <span>Action</span>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody class="list-tbody" id="faq-cate-table">
                                    <!-- <tr class="tr-1 even" key="1" primary="id">
                                        <td width="38" style="text-align:center; line-height: normal;">
                                            <span class="checkbox-custom checkbox-primary">
                                                <input class="selectable-item" type="checkbox"  name="key" id="row-1" value="1"  />
                                                <label for="row-1"></label>
                                            </span>
                                        </td>
                                        <td class="" code="id" style="">1</td>
                                        <td class="" code="first_name" style="">Jim</td>
                                        <td class="" code="last_name" style="">Green</td>
                                        <td class="" code="status" style="">Active</td>
                                        <td class="list-item-action" code="" style="">
                                            <a href="http://admin.html.me/User/edit?id=1" class="text-info" data-pk="1" target="_self" style="">Edit</a>
                                        </td>
                                    </tr>
                                    <tr class="tr-2 odd" key="2" primary="id">
                                        <td width="38" style="text-align:center; line-height: normal;">
                                            <span class="checkbox-custom checkbox-primary">
                                                <input class="selectable-item" type="checkbox"  name="key" id="row-2" value="2"  />
                                                <label for="row-2"></label>
                                            </span>
                                        </td>
                                        <td class="" code="id" style="">2</td>
                                        <td class="" code="first_name" style="">Jim</td>
                                        <td class="" code="last_name" style="">Green</td>
                                        <td class="" code="status" style="">Active</td>
                                        <td class="list-item-action" code="" style="">
                                            <a href="http://admin.html.me/User/edit?id=2" class="text-info" data-pk="2" target="_self" style="">Edit</a>
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>
                            <script type="text/javascript">
                                $(document).ready(function () {
                                    window.loadFAQCategoryData = function () {
                                        var keywords = $('#keywords').val();
                                        $.setLoading($('#faq-cate-table'));
                                        Api.Get('getFaqCateList', {keywords: keywords, order_by: JSON.stringify({'category_status': 'asc', 'id': 'desc'})}, function (object, error) {
                                            if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                $.setLoading($('#faq-cate-table'), 1);
                                                var tableHtml = '', trNums = object['data']['data'].length;
                                                if(trNums > 0){
                                                    for (var i = 0; i < trNums; ++i) {
                                                        tableHtml = tableHtml + Api.render('<tr class="tr-1 {evenOrOdd}" key="{pk}" primary="id">' +
                                                                '<td width="38" style="text-align:center; line-height: normal;">' +
                                                                '<span class="checkbox-custom checkbox-primary">' +
                                                                '<input class="selectable-item" type="checkbox"  name="key" id="row-{pk}" value="{pk}"  />' +
                                                                '<label for="row-{pk}"></label>' +
                                                                '</span>' +
                                                                '</td>' +
                                                                '<td class="" code="id" style="">{pk}</td>' +
                                                                '<td class="" code="category_name" style="">{cateName}</td>' +
                                                                '<td class="" code="created_at" style="">{createTime}</td>' +
                                                                '<td class="" code="updated_at" style="">{updateTime}</td>' +
                                                                '<td class="" code="category_status" style="">{cateStatus}</td>' +
                                                                '<td class="list-item-action" code="" style="">' +
                                                                '<a href="{editUrl}" class="text-info {__accessClass} _access-faq-category-eidt" data-pk="{pk}" target="_self" style="float:left;margin-left:10px;">Edit</a>' +
                                                                '</td>' +
                                                                '</tr>', {
                                                                    'evenOrOdd': object['data']['data'][i]['id'] % 2 == 1 ? 'odd' : 'even',
                                                                    'pk': object['data']['data'][i]['id'],
                                                                    'cateName': object['data']['data'][i]['category_name'],
                                                                    'createTime': object['data']['data'][i]['created_at'],
                                                                    'updateTime': object['data']['data'][i]['updated_at'],
                                                                    'cateStatus': object['data']['data'][i]['category_status'] == 1 ? 'Active' : 'Deactivate',
                                                                    'editUrl': Api.U('/FaqCategory/edit.html', {id: object['data']['data'][i]['id']}),
                                                                    '__accessClass': window.Access.isAccessToAccessId('_access-faq-category-eidt') ? '' : '__access',
                                                                });
                                                    }
                                                    if (tableHtml) {
                                                        $('#faq-cate-table').html(tableHtml);
                                                        if ($('#faq-cate-table').data('inited') != 1) {
                                                            $('#faq-cate-table').data('inited', 1);
                                                            var minwidth = 0;
                                                            var isFixedColumns = minwidth > 0 && $('#tabel201709201430488112715').width() < minwidth;
                                                            // console.log($('#tabel201709201430488112715').width(), isFixedColumns);
                                                            var table = $('#tabel201709201430488112715').DataTable({
                                                                fixedHeader: true,
                                                                autoWidth: isFixedColumns,
                                                                scrollCollapse: true,
                                                                paging: false,
                                                                info: false,
                                                                searching: false,
                                                                scrollX: true,
                                                                order: [[0, '']],
                                                                columnDefs: [
                                                                    {targets: 'nosort', orderable: false, sSortAsc: false}
                                                                ]
                                                            }).on('order.dt', function () {
                                                                var order = table.order()[0];
                                                                var code = $('thead td', this).eq(order[0]).attr('code');
                                                                // console.log(code);
                                                            });
                                                            if (isFixedColumns) {
                                                                new $.fn.dataTable.FixedColumns(table, {
                                                                    leftColumns: 1,
                                                                    rightColumns: 1
                                                                });
                                                            }
                                                        }
                                                    }
                                                } else {
                                                    $('#faq-cate-table').html('');
                                                    $('#faq-cate-table').data('inited', 1);
                                                    var minwidth = 0;
                                                    var isFixedColumns = minwidth > 0 && $('#tabel201709201430488112715').width() < minwidth;
                                                    var table = $('#tabel201709201430488112715').DataTable({
                                                        fixedHeader: true,
                                                        autoWidth: isFixedColumns,
                                                        scrollCollapse: true,
                                                        paging: false,
                                                        info: false,
                                                        searching: false,
                                                        scrollX: true,
                                                        order: [[0, '']],
                                                        columnDefs: [
                                                            {targets: 'nosort', orderable: false, sSortAsc: false}
                                                        ]
                                                    }).on('order.dt', function () {
                                                        var order = table.order()[0];
                                                        var code = $('thead td', this).eq(order[0]).attr('code');
                                                    });
                                                    if (isFixedColumns) {
                                                        new $.fn.dataTable.FixedColumns(table, {
                                                            leftColumns: 1,
                                                            rightColumns: 1
                                                        });
                                                    }
                                                }
                                            } else {
                                                $.showError('Something Error, Retry Please.', 300, function () {
                                                    // window.location.reload();
                                                });
                                                return true;
                                            }
                                        });
                                    }
                                    loadFAQCategoryData();

                                    // delete
                                    $('#_access-faq-category-delete').click(function () {
                                        $.tableMultiOperate($('#faq-cate-table'), function (ids) {
                                            if (ids.length == 0) {
                                                $.showError('Select Item To Delete, First.', 300);
                                            } else {
                                                Api.Delete('deleteFaqCate', {id: JSON.stringify(ids)}, function (object, error) {
                                                    if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                        $.showSuccess('Delete FAQ Category Successfully.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    } else {
                                                        $.showError('Something Error, Retry Please.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    });

                                    // open
                                    $('#_access-faq-category-open').click(function () {
                                        $.tableMultiOperate($('#faq-cate-table'), function (ids) {
                                            if (ids.length == 0) {
                                                $.showError('Select Item To Delete, First.', 300);
                                            } else {
                                                Api.Put('openFaqCate', {id: JSON.stringify(ids)}, function (object, error) {
                                                    if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                        $.showSuccess('Activate FAQ Category Successfully.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    } else {
                                                        $.showError('Something Error, Retry Please.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    });

                                    // close
                                    $('#_access-faq-category-close').click(function () {
                                        $.tableMultiOperate($('#faq-cate-table'), function (ids) {
                                            if (ids.length == 0) {
                                                $.showError('Select Item To Delete, First.', 300);
                                            } else {
                                                Api.Put('closeFaqCate', {id: JSON.stringify(ids)}, function (object, error) {
                                                    console.log(object);
                                                    if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                        $.showSuccess('Deactivate FAQ Category Successfully.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    } else {
                                                        $.showError('Something Error, Retry Please.', 300, function () {
                                                            window.location.reload();
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Modal -->
            <div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Modal -->
        </div>
        <!-- End Page -->

        <!-- Footer -->
        <script type="text/javascript" src="../_resource/js/footer.js"></script>

        <script>
                                (function (document, window, $) {
                                    'use strict';

                                    var Site = window.Site;
                                    $(document).ready(function () {
                                        Site.run();
                                        $('textarea[maxlength]').maxlength({
                                            threshold: 1000,
                                            placement: 'bottom-left-inside'
                                        });

                                        $.components.register("datepicker", {mode: "default", defaults: {autoclose: !0}});

                                        if (RUN_FUNCS.length > 0) {
                                            for (var i = 0; i < RUN_FUNCS.length; i++) {
                                                RUN_FUNCS[i].call();
                                            }
                                        }
                                    });
                                })(document, window, jQuery);


        </script>
    </body>
</html>